@charset "utf-8";
/* 1.声明样式表  css指定编码集：防止乱码*/
/* 2.通用的样式
     元素--盒模型中：内外边距+内容+边框
	        [必考]*元素默认自带外边距：body， h1~h6，  p ， ur/ol
	④通用选择器：选中所有元素添加【效果】样式
			语法：*{默认需要效果}
 */
*{
	margin: 0;
	padding: 0;
	/*字体属性*/
	font-family: "华文彩云";
	font-size: 80px;
}

body{
	/* 背景属性【复合属性：省去部分属性值】
	background:image,size,position,repeat,color
	常用简写：image  size[不能简写]  repeat
	用途：页面频繁改变位置的图片，与img元素固定在一个位置
	子属性：background-color 背景颜色属性【二选一】
	       background-image 背景图片属性【二选一】
		                     属性值：url(路径)/url(""或‘’)
			background-size  背景尺寸属性
							 属性值1个，属性值2个
							 x轴【宽度】 y轴【高度】
            background-repeat  背景平铺效果
			                    属性值 no-repeat 不平铺
	 */
	background: url(../img/bg.jpg);
	/* 背景尺寸属性 */
	background-size: 100% 723px;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
}
/*熊猫*/
.bear{
	width: 200px;
	height: 300px;
	/*判断选择器是否选中*/
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../img/bear_1.png);
	/* 出现背景-背景图大于空间--设置背景尺寸 */
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
	top: 6px;
	left: -10px;
	animation: bear 15s linear infinite;
}
/*动画：1.写关键帧  2.元素添加动画，找到元素添加动画属性
        关键帧特点，在启动元素动画位置，继承父元素：定位，背景，空间
*/
@keyframes bear{
	/*简单位移*/
	0%{  /*初始化*/
		top: 6px;
		left: -10px;
		transform: rotate(0deg);
	}
	10%{
		left: 698px;
		background: url(../img/bear_1.png);
		/* 背景尺寸：背景空间与实际图片不符 */
		background-size: 100% 100%;
		transform: rotate(100deg) scale(1);
		
	}
	20%{
		top: 218px;
		left: 550px;
		background: url(../img/bear_2.png);
		background-size: 100% 100%;
		transform: rotate(300deg) scale(1);
		
	}
	30%{
		top: 218px;
		left: 430px;
		background: url(../img/bear_3.png);
		background-size: 100% 100%;
		transform: rotate(150deg) scale(1);
		
	}
	40%{
		top: 55px;
		left: 100px;
		background: url(../img/bear_4.png);
		background-size: 100% 100%;
		transform: rotate(100deg) scale(1);
	}
	50%{
		top: 100px;
		left: 413px;
		background: url(../img/bear_5.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(1) ;
	}
	60%{
		top: 100px;
		left: 550px;
		background: url(../img/bear_6.png);
		background-size: 100% 100%;
		transform: rotate(200deg) scale(1);
	}
	70%{
		top: 100px;
		left: 400px;
		background: url(../img/bear_7.png);
		background-size: 100% 100%;
		transform: rotate(800deg) scale(1);
	}
	80%{
		top: 50px;
		left: 300px;
		background: url(../img/bear_8.png);
		background-size: 100% 100%;
		transform: rotate(700deg) scale(1);
	}
	90%{
		top: 60px;
		left: 413px;
		background: url(../img/bear_9.png);
		background-size: 100% 100%;
		transform: rotate(1000deg) scale(3) ;;
	}
	100%{
		top: 100px;
		left: 513px;
		background: url(../img/bear_10.png);
		background-size: 100% 100%;
		transform: rotate(1000deg) scale(4);
	}
}